<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物系统</title>
		<style type="text/css">
			/* 子绝父相  ：子标签的位置 参考父标签
				1、做标签的重叠效果，一定使用定位
				2、子标签的位置，要根据父标签设置。 自绝父相
				3、子标签设置了绝对定位，就无法撑起父标签，这时我们要给父标签设置一个合适的高度。
			*/
			h2{
				border-bottom: 1px solid pink; /* 底部边框 */
				position: relative; /* 相对定位 */
				height: 30px; /* 高度 */
			}
			h2 span{
				border-bottom: 3px solid #0056B3; /* 底部边框 */
				position: absolute; /* 绝对定位 */
				left: 0; /* 距离参考目标左侧距离 */
				bottom: -1.5px; /* 距离参考目标下侧距离 */
			}
			.form-group{  
				margin-bottom: 10px; /* 底部外边距 */
				line-height: 30px; /* 文字行高 */
			}
			label{    /* label默认是行标签,不能直接设置宽高,要先修改display */
				display: inline-block;  /* 设置display为 inline-block */
				width: 100px; /* 宽度 */
			}
			input{
				padding: 5px; /* 内填充 */
				width: 200px; /* 宽度 */
				/* 输入框去掉圆角 之后会变丑 重新设置一次边框 即可 */
				border-radius: 0;  /* 设置圆角为0 */
				border: 1px solid #000000; /* 设置边框 */
			}
			select{
				background-color: #fff; /* 背景色 */
				border: none; /* 去掉边框 */
			}
			button{
				width: 100px; /* 宽度 */
				height: 30px; /* 高度 */
				background-color: #0056B3; /* 背景色 */
				border: none; /* 去掉边框 */
			}
		</style>
	</head>
	<body>
		<!-- ctrl + alt + a   qq切图快捷键-->
		<h2>
			<span>购物信息</span>
		</h2>
		<!-- 
		1、form 只是语义化标签，我们理解为div就行 
	    2、label 当做span 看待
	    3、使用div.form-group 来包裹表单，可以实现表单换行。也方便调整每一行的整体效果
		-->
		<!-- 关闭表单的记录功能 -->
		<form autocomplete="off">
			<div class="form-group">
				<label for="">账号</label>
				<input type="text" class="account">
			</div>
			<div class="form-group">
				<label for="">选择商品</label>
				<select name="" id="" class="goods">
					<option value="请选择">请选择</option>
					<option value="矿泉水">矿泉水</option>
					<option value="冰棒">冰棒</option>
					<option value="冰淇淋">冰淇淋</option>
				</select>
			</div>
			<div class="form-group">
				<label for="">单价</label>
				<input type="text" class="price" value="0.00">
			</div>
			<div class="form-group">
				<label for="">数量</label>
				<input type="text" class="num" value="0">
			</div>
			<div class="form-group">
				<label for="">总价</label>
				<input type="text" class="total" value="0.00">
			</div>
			<div class="form-group">
				<label for=""></label>
				<!-- 这里type 必须 ，不加可能有bug -->
				<button type="button" class="btn">确认</button>
			</div>
		</form>
		<!-- alt + ? 代码提示 -->
		<script src="js/25.js"></script>
	</body>
</html>
